@tailwind base;
@tailwind components;
@tailwind utilities;

.case-container {
    container-type: inline-size;
}

.history-description {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        'police_case_number number_call_to_police jurisdiction'
        'dispute_type dispute_subtype feedback_unit'
        'id_of_call_to_police case_place case_place'
        'case_level is_criminal_case_solved is_public_security_case_found'
        'is_dispute_case_resolved sensitive_case subject_of_case'
    ;
    @apply gap-2 mt-1;
}

.history-police_case_number {
    grid-area: police_case_number;
}

.history-number_call_to_police {
    grid-area: number_call_to_police;
}

.history-jurisdiction {
    grid-area: jurisdiction;
}

.history-dispute_type {
    grid-area: dispute_type;
}

.history-dispute_subtype {
    grid-area: dispute_subtype;
}

.history-feedback_unit {
    grid-area: feedback_unit;
}

.history-id_of_call_to_police {
    grid-area: id_of_call_to_police;
}

.history-case_place {
    grid-area: case_place;
}

.history-case_level {
    grid-area: case_level;
}

.history-is_criminal_case_solved {
    grid-area: is_criminal_case_solved;
}

.history-is_public_security_case_found {
    grid-area: is_public_security_case_found;
}

.history-is_dispute_case_resolved {
    grid-area: is_dispute_case_resolved;
}

.history-sensitive_case {
    grid-area: sensitive_case;
}

.history-subject_of_case {
    grid-area: subject_of_case;
}

.joint_investigation-description {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas: 
        'case_status case_code case_name'
        'start_time_of_incident illegal_info punish_category'
        'people_involved_case_category crime_scene_detail_address current_coercive_measure'
        'illegal_act illegal_degree case_charges'
        'prosecution_number prosecute_decision_date charges'
        'action_cause . .'
    ;
    @apply gap-2 mt-1;
}

.joint_investigation-case_status {
    grid-area: case_status;
}

.joint_investigation-case_code {
    grid-area: case_code;
}

.joint_investigation-case_name {
    grid-area: case_name;
}

.joint_investigation-start_time_of_incident {
    grid-area: start_time_of_incident;
}

.joint_investigation-illegal_info {
    grid-area: illegal_info;
}

.joint_investigation-punish_category {
    grid-area: punish_category;
}

.joint_investigation-people_involved_case_category {
    grid-area: people_involved_case_category;
}

.joint_investigation-crime_scene_detail_address {
    grid-area: crime_scene_detail_address;
}

.joint_investigation-current_coercive_measure {
    grid-area: current_coercive_measure;
}

.joint_investigation-illegal_act {
    grid-area: illegal_act;
}

.joint_investigation-illegal_degree {
    grid-area: illegal_degree;
}

.joint_investigation-case_charges {
    grid-area: case_charges;
}

.joint_investigation-prosecution_number {
    grid-area: prosecution_number;
}

.joint_investigation-prosecute_decision_date {
    grid-area: prosecute_decision_date;
}

.joint_investigation-charges {
    grid-area: charges;
}

.joint_investigation-action_cause {
    grid-area: action_cause;
}

@container (max-width: 400px) {
    .history-description {
        display: flex;
        flex-direction: column;
    }

    .case-wrapper {
        background-color: transparent !important;
    }

    .title {
        max-width: 112px;
        @apply line-clamp-1;
    }

    .joint_investigation-description {
        display: flex;
        flex-direction: column;
    }

    .suspect-wrapper {
        flex-direction: column;
        @apply gap-2;

        > div:nth-of-type(2) {
            margin-left: 0;
        }
    }
}